SVG for Process Visualization

This paper reports on a persistent challenge for developers who want to visualize the process that is executed under the hood of an application. Typically, such a process is initiated by an end-user via the user interface. It is quite natural that the execution steps in the process are not visible from the perspective of the user interface, except when an error occurs. Hence, the end-user is often unaware of the complexity or the distributed character of the executed process. And we want to keep it that way, except in the cases where we use the application for demonstration, instruction or scientific purposes, with the focus on what exactly happens under the hood of the application when we perform a particular action. To visualize and animate the process in realtime, a monitoring framework is required that monitors the events in an application and translates these events into a graphical representation that can easily be understood and adapted by the demonstration or instruction group. In the latter phase, SVG can play an important role because of its extensive range of graphics concepts, its highly dynamic nature and because it is programmable through Java or JavaScript. We will present a generic infrastructure for monitoring events in applications that dynamically adapts an SVG representation of an underlying logical process model. In some cases, depending on the modeling language, the SVG front-end can even be generated automatically from the process model. This paper presents some of the most important features of a process monitoring and visualization framework with an SVG front-end.